<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style> 
			.red{
				height: 10vh;
			}
          .outer{position:relative;width:1000px;height:1000px;border:3px solid #ccc;} 
          .outer i{} 
          .outer:before, 
          .outer:after{position:absolute;display:block;content:"";-webkit-transition:all 0.1s;} 
          .outer:before{top:-3px;left:-3px;width:0;height:0;border-top:3px solid #F00;-webkit-transition-delay: 0.9s;} 
          .outer:after{bottom:-3px;right:-3px;width:0;height:0;border-top:3px solid #F00;-webkit-transition-delay: 0.3s;} 
          .outer i:before, 
          .outer i:after{position:absolute;display:block;content:"";-webkit-transition:all 0.3s;} 
          .outer i:before{left:-3px;bottom:-3px;height:0;width:0;border-left:3px solid #F00;-webkit-transition-delay: 0s;} 
          .outer i:after{right:-3px;top:-3px;height:0;width:0;border-left:3px solid #F00;-webkit-transition-delay: 0.6s;} 
          .outer:hover:after, 
          .outer:hover:before{width:1030px;} 
          .outer:hover i:after, 
          .outer:hover i:before{height:1030px;} 
          .outer:hover:before{-webkit-transition-delay: 0s;} 
          .outer:hover:after{-webkit-transition-delay: 0.5s;} 
          .outer:hover i:after{-webkit-transition-delay: 0.3s;} 
          .outer:hover i:before{-webkit-transition-delay: 0.8s;} 
       </style> 
	</head>
	<body>
        <div class="outer"> 
            <i></i> 
        </div>
        <div class="red">
        	<div class="org2"></div>
        	<div class="org">
        			<div class="yellow2"></div>
        		<div class="yellow">
        			<div class="blue2"></div>
        			<div class="blue" style="border: solid 2px; height: 20vh;">
        				<div class="purple">
        					
        				</div>
        			</div>
        		</div>
        	</div>
        </div>
        <script>
        $(".purple").parent().css('background-color','blue');
        $(".purple").parent().css('background-color','red');
        $(".purple").parent().css('background-color','yellow');
        </script>
	</body>
</html>
